<template>
  <div class="main">
    <div class="content">
      <div class="left">
        <div class="input_wrap">
          <div class="text_wrap">
            <span class="input_tip">条形码</span>
          </div>
          <input class="input_text" type="text" v-model="bar_code" @change="changeBarCode">
        </div>
        <div class="input_wrap">
          <div class="text_wrap">
            <span class="input_tip">上架数量</span>
          </div>
          <input class="input_text" type="number" v-model="apply_number">
        </div>
        <div class="input_wrap">
          <div class="text_wrap">
            <span class="input_tip">仓库</span>
          </div>
          <select v-model="store" class="input_text">
            <option v-for="readystore in stores" :value="readystore.warehouseId" :key="readystore.warehouseId">
              仓库ID：{{readystore.warehouseId}}
              仓库地址：{{readystore.address}}
              所剩存货数量：{{readystore.warehouseId}}
            </option>
          </select>
        </div>

        <div class="input_wrap">
          <div class="text_wrap">
            <span class="input_tip">商品原价</span>
          </div>
          <input class="input_text" type="number" v-model="originalPrice">
        </div>
        <div class="input_wrap">
          <div class="text_wrap">
            <span class="input_tip">商品特价</span>
          </div>
          <input class="input_text" type="number" v-model="specialPrice">
        </div>
        <div class="input_wrap">
          <div class="text_wrap">
            <span class="input_tip">开启特价</span>
          </div>
          <select v-model="useSpecialPrice" class="input_text">
            <option :value=true >是</option>
            <option :value=false >否</option>
          </select>
        </div>

        <div class="input_wrap">
          <div class="text_wrap">
            <span class="input_tip">商品退货期限（天）</span>
          </div>
          <input class="input_text" type="number" v-model="return_goods_day">
        </div>
        <div class="input_wrap">
          <div class="text_wrap">
            <span class="input_tip">商品换货期限（天）</span>
          </div>
          <input class="input_text" type="number" v-model="change_goods_day">
        </div>
        <div class="input_wrap">
          <div class="text_wrap">
            <span class="input_tip">商品维修期限（天）</span>
          </div>
          <input class="input_text" type="number" v-model="repair_goods_day">
        </div>
        <div class="button_wrap">
          <div class="button" @click="scanBarCode">
            <span class="text">扫描商品条形码</span>
          </div>
          <div class="button" @click="submitApply">
            <span class="text">提交申请</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="search_bar">
          <div class="input_wrap">
            <input class="input_text" type="text" placeholder="搜索商品名快速添加" v-model="searchWord">
          </div>
          <div class="button" @click="search">
            <span class="text">搜索</span>
          </div>
        </div>
        <div class="search_content">
          <div class="line">
            <div class="barcode">商品码</div>
            <div class="name">商品名</div>
            <div class="stock">商品库存</div>
            <div class="function">功能</div>
          </div>
          <div class="content">
            <div class="line" v-for="item in items" :key="item.bar_code">
              <div class="barcode">{{item.barCode}}</div>
              <div class="name">{{item.commodity}}</div>
              <div class="stock">{{item.stock}}</div>
              <div class="function">
                <div class="function_button" v-if="item.stock>0"
                     @click="choose(item.barCode)" >选择</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import shopOwnerService from '../../service/shopowner'

export default {
  name: 'ShelfAddedApply',
  data () {
    return {
      bar_code: '',
      apply_number: 0,
      store: '',
      originalPrice: 0.0,
      specialPrice: 0.0,
      useSpecialPrice: false,
      return_goods_day: 0,
      change_goods_day: 0,
      repair_goods_day: 0,
      stores: null,
      items: null,
      searchWord: ''
    }
  },
  methods: {
    async changeBarCode () {
      this.stores = null
      this.store = null
      await this.getStocks()
    },
    async getStocks () {
      let result = await shopOwnerService.getStores(this.bar_code)
      this.stores = result.data
      if (this.stores.length > 0 && this.stores[0].warehouseId !== undefined) {
        this.store = this.stores[0].warehouseId
      } else {
        this.store = -1
      }
    },
    scanBarCode () {
      alert('扫描条形码')
    },
    async submitApply () {
      // 商品条形码、上架数量、仓库id、原价、特价、是否特价、消费者三包期限、商店id
      let data = {
        barCode: this.bar_code,
        count: this.apply_number,
        warehouseId: this.store,
        originalPrice: this.originalPrice,
        specialPrice: this.specialPrice,
        useSpecialPrice: this.useSpecialPrice,
        returnDays: this.return_goods_day,
        exchangeDays: this.change_goods_day,
        repairDays: this.repair_goods_day
      }
      // 如果当前用户已登录，从用户那里获取本店id，如果未登录，不允许提交
      const loginedUser = this.$store.getters.getLoginUser
      if (loginedUser !== null) {
        data.storeId = loginedUser.storeId
      } else {
        return
      }
      let result = await shopOwnerService.commitShelfAddedApply(data)
      if (result.data > 0) {
        alert('申请成功')
      } else {
        alert('申请失败')
      }
    },
    async search () {
      let result = await shopOwnerService.getStocks(this.searchWord)
      this.items = result.data
    },
    async choose (barcode) {
      this.bar_code = barcode
      await this.changeBarCode()
    }
  }
}
</script>

<style lang="scss" scoped>
  .main{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    .content {
      width: 1000px;
      margin: 0 auto;
      /*border: 1px solid black;*/
      position: relative;
      top: 0;
      left: 0;
      .left {
        width: 500px;
        /*border: 1px solid red;*/
        position: absolute;
        top: 50px;
        left: 0;
        .input_wrap {
          /*border: 1px solid blue;*/
          width: 500px;
          height: 50px;
          .text_wrap{
            width: 190px;
            float: left;
            text-align: right;
            padding: 0 10px 0 0;
            .input_tip{
              font-size: 20px;
            }
          }
          .input_text {
            width: 250px;
            height: 20px;
          }

        }
        .button_wrap {
          /*border: 1px solid black;*/
          width: 500px;
          height: 100px;
          .button {
            margin: 10px auto;
            width: 200px;
            height: 50px;
            border-radius: 10px;
            border: 2px solid black;
            text-align: center;
            .text {
              font-size: 20px;
              line-height: 50px;
            }
          }
        }
      }
      .right {
        width: 500px;
        /*border: 1px solid red;*/
        position: absolute;
        top: 50px;
        left: 530px;
        .search_bar {
          width: 300px;
          height: 50px;
          position: relative;
          /*border: 2px solid black;*/
          .input_wrap{
            width: 200px;
            height: 50px;
            position: absolute;
            top: 10px;
            left: 0;
            .input_text{
              width: 200px;
              height: 30px;
              text-align: center;
              font-size: 14px;
              line-height: 30px;
              border-radius: 5px;
            }
          }
          .button{
            width: 50px;
            height: 20px;
            border: 1px solid black;
            border-radius: 5px;
            position: absolute;
            top: 15px;
            left: 220px;
            text-align: center;
            .text {
              font-size: 14px;
            }
          }
        }
        .search_content {
          width: 500px;
          .line {
            height: 30px;
            position: relative;
            border: 2px solid black;
            overflow: hidden;
            text-align: center;
            @mixin col {
              position: absolute;
              top: 0;
              border-right: 1px solid black;
              height: 30px;
              line-height: 30px;
              padding: 0 0 0 5px;
              overflow: hidden;
            }
            .barcode{
              @include col;
              left: 0;
              width: 145px;
            }
            .name{
              @include col;
              left: 150px;
              width: 175px;
            }
            .stock{
              @include col;
              left: 330px;
              width: 95px;
            }
            .function {
              @include col;
              left: 430px;
              width: 70px;
              .function_button {
                width: 30px;
                height: 20px;
                margin: 5px 5px 0;
                text-align: center;
                line-height: 20px;
                border: 1px solid black;
                border-radius: 2px;
              }
            }
          }
          .content{
            width: 500px;
            height: 400px;
            /*border: 2px solid blue;*/
            overflow: auto;
          }

        }

      }
    }
  }

</style>
